<template>
<div>
  <son name="王书亮" :age="age" :sex.sync="fatherSex"
      @fatherFunction="update" ref="son">
  </son>
  <div>父组件性别{{fatherSex}}</div>
  <div>父组件年龄{{age}}</div>
  <div>父组件方法{{fatherFunction}}</div>
  <button @click="getSon">调用子组件的方法</button>
  <h1>子组件2</h1>
  <son2></son2>
  <h1>子组件3</h1>
  <son3></son3>
</div>
</template>

<script>
import son from './son'
import son2 from './son2'
import son3 from './son3'
export default {
  name: "father",
  components:{
    son,
    son2,
    son3
  },
  data() {
    return {
      fatherSex: '男',
      age: 26,
      fatherFunction: '我还未被调用'
    }
  },
  methods: {
    update(params) {
      this.fatherFunction = params
    },
    getSon() {
      this.$refs.son.son2('打乒乓球')
    }
  }
}
</script>

